<template>
  <div class="type-list">
    <th-link>默认</th-link>
    <th-link type="info">信息</th-link>
    <th-link type="success">成功</th-link>
    <th-link type="warning">警告</th-link>
    <th-link type="error">错误</th-link>
  </div>

  <div class="markdown-container">
    <Markdown :source="source" />
  </div>
</template>
<script lang="ts" setup>
import ThLink from "@lib/Link";
import Markdown from "vue3-markdown-it";

const source = `
#### :sparkles: 按钮组件使用 :sparkles:

    import ThLink from "@lib/Link";
    
#### :sparkles: 按钮类别 :sparkles:

    <th-link>默认</th-link>
    <th-link type="info">信息</th-link>
    <th-link type="success">成功</th-link>
    <th-link type="warning">警告</th-link>
    <th-link type="error">错误</th-link>
`;
</script>
<style lang="scss" scoped>
.markdown-container {
  padding: 20px;
  width: 650px;
  height: 300px;
}
</style>
